<template>
	<ul class="music-board-playlist search-albums">
		<li v-for="entry in sortList" class="col-xs-3">
			<div>
				<a href="#"><img :src="entry.picUrl"></a>
			</div>
			<p>
				<a href="#">{{entry.name}}</a>
			</p>
			<p>
				<a href="#">{{entry.artists}}</a>
			</p>

		</li>
	</ul>
</template>

<script>
	export default {
		data: function() {
			return {
				data: null
			}
		},
		computed: {
			sortList: function() {
				var list = []
				if(this.data) {
					this.amout = this.data.albumCount
					this.data.albums.forEach(function(value) {
						var id = value.id
						var name = value.name
						var artists = []
						value.artists.forEach(function(item) {
							artists.push(item.name)
						})
						artists = artists.join(' / ')
						var picUrl = value.picUrl + '?param=180y180'
						var data = {
							id: id,
							name: name,
							artists: artists,
							picUrl: picUrl
						}
						list.push(data)
					})
				}
				return list
			}
		}
	}
</script>

<style>
	
	ul.search-albums li p {
		margin: 0px 6px;
		text-align: left;
	}
</style>